<include file="public@header" />
<link rel="stylesheet" href="__STATIC__/css/zTree_v3/zTreeStyle/zTreeStyle.css?v={:time()}" type="text/css">
<style>
    body {
        background-color: white;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    div, p, table, th, td {
        list-style: none;
        margin: 0;
        padding: 0;
        color: #333;
        font-size: 13px;
        font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
    }
    #testIframe {
        margin-left: 10px;
    }
    .expander{margin-left: -20px;}
    .action_ul{overflow:hidden; font-size:16px; font-family:'黑体'; margin:10px 0px;}
    .action_ul li{padding:0px 10px; display:inline;text-align:center; float:left; cursor:pointer}
    .action_ul li img{margin:5px 0; width: 18px}
    .action_ul li p{margin: 0 0 5px;}
    .visua_div{border:2px solid #E3EEF4; white-space: nowrap;overflow-x: auto;}
    .visua_child{position:relative;display: inline-block;width:155px; height:160px; border-radius:10px; margin:3px; text-align:center; padding:15px 0 10px 0; vertical-align: text-top;}
    .visua_child input{margin: 0 2px; background:#fff}
    .visua_child p{margin: 0 0 3px; width: 100%;height: auto;white-space:normal;overflow: hidden;}

    .borderRight{border-right:2px solid #ccc}
    .bg_qianlv{background-color:#E9FEC0;}
    .bg_huanglv{background-color:#808000;}
    .bg_lan{background-color:#8080FF;}
    .bg_cheng{background-color:#F7E1CC;}
    .bg_hui{background-color:#E6E6E6;}
    .bg_lv{background-color:#00CC00;}
    .bg_huang{background-color:#F3D776;}
    .bg_red{background-color:#FF6699;}
    .bg_mei{background-color:#E792E0;}
    .bg_blue{background-color:#33CCFF;}
    .gege{width:15px; height:15px; float:left; margin:0 3px}
    .visua_child img{position:absolute; margin-top:-15px; left:85%; width:15px; height:15px}
    #center-tree{
        width: 16.12%;
        padding: 0;
        border-right: 1px solid #cccccc;
        overflow-y: auto;
        height: 730px;
        border-right: #999999 1px dashed;
    }
    #center-right {
        width: 83.2%;
        padding: 0;
    }
    #center-right .visua_div{
        border:2px solid #E3EEF4;
        white-space: nowrap;
        padding: 0;
        overflow-y: auto;
        height: 628px;
    }

</style>
</head>

<body>

<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="">可视化业务</a></li>
    </ul>
    <div>
        <form class="js-ajax-form" action="{:url('Orders/visua')}" method="get">
            <div style="display: none" id="categorys">
                {$categorys}
            </div>

            <div class="row">
                <div class="col-lg-2" id="center-tree" >
                    <input type="text" style=" width:95%; margin-bottom:5px;" class="form-control" name="name" value="{$name}" placeholder="按照墓位编号或逝者姓名搜索"/>
                    <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>

                </div>
                <div class="col-lg-8" id="center-right" >
                    <div class="col-lg-12" style="padding: 0;">
                        <div style=" overflow:hidden; background:#F7F7F7; padding:5px 10px">
                            <input type="hidden" value="{$orders_id}" name="orders_id">
                            <div class="bg_qianlv gege"></div><span style="float:left">无规划</span>
                            <div class="bg_huanglv gege"></div><span style="float:left">无产品</span>
                            <div class="bg_blue gege"></div><span style="float:left">空闲</span>
                            <div class="bg_cheng gege"></div><span style="float:left">已认购</span>
                            <div class="bg_lv gege"></div><span style="float:left">定金</span>
                            <div class="bg_huang gege"></div><span style="float:left">购买未使用</span>
                            <div class="bg_mei gege"></div><span style="float:left">部分安葬</span>
                            <div class="bg_red gege"></div><span style="float:left">全部安葬</span>
                            <div class=" bg_hui gege"></div><span style="float:left">迁墓中</span>
                        </div>
                        <ul class="action_ul">
                            <!-- <if condition="$orders_id neq 0">-->
                            <li class="borderRight">
                                <a id="sale_hw" data-href="{:url('sale')}?orders_id={$orders_id}">
                                    <img src="__TMPL__/Public/assets/images/huanwei.png">
                                    <p>确认换位</p>
                                </a>
                            </li>
                            <!--<else/>-->
                            <li class="borderRight">
                                <a id="sale" data-href="{:url('sale')}">
                                    <img src="__TMPL__/Public/assets/images/xiaoshou.png">
                                    <p>销售</p>
                                </a>
                            </li>
                            <li class="borderRight deposit" style="display: none">
                                <a id="deposit" data-href="{:url('Deposit/tomb_deposit')}">
                                    <img src="__TMPL__/Public/assets/images/jicun.png">
                                    <p>寄存</p>
                                </a>
                            </li>
                            <li class="">
                                <a href="javascript:location.reload();">
                                    <img src="__TMPL__/Public/assets/images/shuaxin.png">
                                    <p>刷新</p>
                                </a>
                            </li>
                            <!--</if>-->
                        </ul>
                    </div>
                    <div class="col-lg-12" style="padding: 0;">
                        <div class="visua_div"></div>
                    </div>
                </div>
            </div>

     <!--   <table border=0 style="align-items: left;">
            <tr>
                <td width=15% align=left valign=top style="BORDER-RIGHT: #999999 1px dashed;">
                    <input type="text" style=" width:95%; margin-bottom:5px;" class="form-control" name="name" value="{$name}" placeholder="按照墓位编号或逝者姓名搜索"/>
                    <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
                </td>
                <td width=95% align=left valign=top>
                    <div style="width:80%; float:left;">
                        <div style=" overflow:hidden; background:#F7F7F7; padding:5px 10px">
                            <input type="hidden" value="{$orders_id}" name="orders_id">
                            <div class="bg_qianlv gege"></div><span style="float:left">无规划</span>
                            <div class="bg_huanglv gege"></div><span style="float:left">无产品</span>
                            <div class="bg_blue gege"></div><span style="float:left">空闲</span>
                            <div class="bg_cheng gege"></div><span style="float:left">已认购</span>
                            <div class="bg_lv gege"></div><span style="float:left">定金</span>
                            <div class="bg_huang gege"></div><span style="float:left">购买未使用</span>
                            <div class="bg_mei gege"></div><span style="float:left">部分安葬</span>
                            <div class="bg_red gege"></div><span style="float:left">全部安葬</span>
                            <div class=" bg_hui gege"></div><span style="float:left">迁墓中</span>
                        </div>
                        <ul class="action_ul">
                            &lt;!&ndash; <if condition="$orders_id neq 0">&ndash;&gt;
                                <li class="borderRight">
                                    <a id="sale_hw" data-href="{:url('sale')}?orders_id={$orders_id}">
                                        <img src="__TMPL__/Public/assets/images/huanwei.png">
                                        <p>确认换位</p>
                                    </a>
                                </li>
                            &lt;!&ndash;<else/>&ndash;&gt;
                            <li class="borderRight">
                                <a id="sale" data-href="{:url('sale')}">
                                    <img src="__TMPL__/Public/assets/images/xiaoshou.png">
                                    <p>销售</p>
                                </a>
                            </li>
                            <li class="borderRight deposit" style="display: none">
                                <a id="deposit" data-href="{:url('Deposit/tomb_deposit')}">
                                    <img src="__TMPL__/Public/assets/images/jicun.png">
                                    <p>寄存</p>
                                </a>
                            </li>
                            <li class="">
                                <a href="javascript:location.reload();">
                                    <img src="__TMPL__/Public/assets/images/shuaxin.png">
                                    <p>刷新</p>
                                </a>
                            </li>
                            &lt;!&ndash;</if>&ndash;&gt;
                        </ul>
                        <div class="visua_div"></div>
                    </div>
                </td>
            </tr>
        </table>-->
        </form>
    </div>
    <script type="text/javascript" src="__STATIC__/js/zTree_v3/jquery.ztree.core.js?v={:time()}"></script>
    <SCRIPT type="text/javascript">
        var ordersId = "{$orders_id}"
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
                beforeClick: function (treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        var id = treeNode.id;
                        if(id>0){
                            gethtml(id,treeNode);
                        }
                        return true;
                    }
                },
            }
        };
        $(document).ready(function () {
            var t = $("#tree");
            var json_categorys = '{$categorys}';
            var categorys = JSON.parse(json_categorys);
            console.log(categorys);
            t = $.fn.zTree.init(t, setting, categorys);
            var zTree = $.fn.zTree.getZTreeObj("tree");
            var treeNode = zTree.getNodeByTId("{$selected_id}");

            zTree.selectNode(zTree.getNodeByParam("tId", "{$selected_id}",null))
            var id = treeNode.id;
            if(id>0){
                gethtml(id,treeNode);
            }
        });

        function gethtml(id,treeNode) {
            $.ajax({
                url		: "{:url('tombareacol')}",
                type	    : "post",
                dataType : "json",
                data	    : {'id':id,'Ajax': 1},
                success : function(result){
                    if(result.data.length == 0){
                        $(".visua_div").html('');
                        return;
                    }
                    var html="";
                    $.each(result.data, function(i, n){
                        if (n.cate_id==4){
                            $('.deposit').css("display","block");
                        } else {
                            $('.deposit').css("display","none");
                        }
                        $.each(n.col, function(y, m){
                            var _disabled='';

                            if(m.status == 1) {
                                switch (m.col_status) {
                                    case 1:
                                        html += "<div class='visua_child bg_blue'>";
                                        break;
                                    case 2:
                                        html += "<div class='visua_child bg_cheng'>";
                                        _disabled = '';
                                        break;
                                    case 3:
                                        html += "<div class='visua_child bg_lv'>";
                                        break;
                                    case 4:
                                        html += "<div class='visua_child bg_qianlv'>";
                                        break;
                                    case 5:
                                        html += "<div class='visua_child bg_huang'>";
                                        break;
                                    case 6:
                                        html += "<div class='visua_child bg_mei'>";
                                        break;
                                    case 7:
                                        html += "<div class='visua_child bg_red'>";
                                        break;
                                    case 8:
                                        html += "<div class='visua_child bg_hui'>";
                                        break;
                                    default:
                                        html += "<div class='visua_child bg_huanglv'>";
                                        break;
                                }
                            }else{
                                html += "<div class='visua_child'>";
                            }
                            if (m.col_status!=1 &&  m.col_status!=2 ) {
                                _disabled='disabled';
                            }
                            var order_id = '';
                            if (m.order_id){
                                order_id = m.order_id;
                            }
                            if(m.status == 1) {
                                if (ordersId >0){
                                    if (m.col_status !=1){
                                        _disabled='disabled';
                                    }else {
                                        _disabled='';
                                    }
                                } else {
                                    if(n.cate_id==2 && result.user_if_sale == 0){
                                        _disabled='disabled';
                                    }
                                }
                                if (m.reacher != ''  &&  m.reacher != null) {
                                    if (m.login_id != 1 || m.login_id != 5) {
                                        html += "<img src='__TMPL__/Public/assets/images/peo.png' name='diding' title='抵顶人姓名:" + m.reacher + "'/>";
                                    } else {
                                        html += "<div style='position: absolute; right: 5%;top: 1%; color: #13227a;' name='diding'>" + m.reacher + "</div><p></p>";
                                    }
                                    html += "<p><input type='checkbox' name='no[]' " + _disabled + " data-id='"+treeNode.tId+"'  value='" + m.colID + "' data-order_id='" + order_id + "' data-msg='" + n.cate_id + "'>" + m.num + "</p>";
                                } else {
                                    html += "<p><input type='checkbox' name='no[]' " + _disabled + " data-id='"+treeNode.tId+"' value='" + m.colID + "' data-order_id='" + order_id + "' data-msg='" + n.cate_id + "'>" + m.num + "</p>";
                                }

                                if(m.col_status == 2 || m.col_status == 1 || m.col_status == 3){
                                    if(m.selling_price) {
                                        html += "<p>单价:" + m.selling_price + "</p>";
                                    }
                                }
                                if(m.col_status == 2 || m.col_status == 3){
                                    if (m.shoppingguide) {
                                        html += "<p>业务员:" + m.shoppingguide + "</p>";
                                    }
                                }
                                if(m.col_status == 5 || m.col_status == 6|| m.col_status == 7){
                                    if (m.buyer_name) {
                                        html += "<p>持证人:" + m.buyer_name + "</p>";
                                    }
                                }
                                if(m.col_status == 6|| m.col_status == 7) {
                                    if (m.deceased_name) {
                                        html += "<p>逝者:" + m.deceased_name + "</p>";
                                    }
                                }

                            }
                            html += "</div>";
                        })
                        html+="<br />";
                    })
                    $(".visua_div").html(html);
                },
                error	: function(){
                    alert("服务器内部错误，请联系系统管理员");
                }
            });
        }

        // 换位
        $(document).on("click","#sale_hw",function(){
            var name = $("input[name='no[]']:checked");
            <!--没有子级时触发事件-->
            if(name.length < 1 ) {
                alert("请选择墓位！");
            }else if(name.length > 1){
                alert("只能选择一个墓位！");
            }else {
                var tombar_id = '', order_id='',flag = false;
                $.each($("input[name='no[]']:checked"), function (i, n) {
                    tombar_id =  $(this).val();
                    order_id =  $(this).attr('data-order_id');
                });
                $.post($(this).data('href'), {ajax:1,orders_id:ordersId,mw_id:tombar_id}, function(result){
                    if(result.code == 1){
                        alert("换位成功");
                        window.location.href = result.url;
                    } else {
                        layer.msg(result.msg);
                    }
                }, 'json');


                // if (flag) {
                //     return;
                // }
                var url = $(this).data('href') + '?ajax=1&tomb_id=' + tombar_id+'&order_id='+order_id;
                console.log(url)
                // $(this).attr("href", url);
            }
        })

        $(document).on("click","#deposit",function(){
            var name = $("input[name='no[]']:checked");
            <!--没有子级时触发事件-->
            if(name.length < 1 ) {
                alert("请选择墓位！");
            }else if(name.length > 1){
                alert("只能选择一个墓位！");
            }else {
                var tombar_id = '', order_id='',flag = false;
                $.each($("input[name='no[]']:checked"), function (i, n) {
                    tombar_id =  $(this).val();
                    order_id =  $(this).attr('data-order_id');
                });
                if (flag) {return;}
                var url = $(this).data('href') + '&tomb_id=' + tombar_id;
                console.log(url)
                $(this).attr("href", url);
            }
        })
        $(document).on("click","#sale",function(){
            var name = $("input[name='no[]']:checked");
            var orders_id = $("input[name='orders_id']").val();
            <!--没有子级时触发事件-->
            if(name.length < 1 ) {
                alert("请选择墓位！");
            }else if(name.length > 1){
                alert("只能选择一个墓位！");
            }else{
                var tombar_id = '', order_id='',flag = false,selected_id=0;
                $.each($("input[name='no[]']:checked"), function (i, n) {
                    tombar_id =  $(this).val();
                    order_id =  $(this).attr('data-order_id');
                    selected_id =  $(this).attr('data-id');
                });
                if(flag){
                    return;
                }
                var url  = $(this).data('href') +'?tomb_id='+ tombar_id +'&order_id='+order_id+'&orders_ids='+orders_id+"&selected_id="+selected_id;
                console.log(url)
                $(this).attr("href",url);
            }
        })

        //全选
        function selectAll(){
            var name = $("input[name='no[]']");
            for(var i=0;i<name.length;i++){
                if(name[i].disabled != true){
                    name[i].checked=true;
                }
            }
        }
        //全不
        function selectNone(){
            var name = document.getElementsByName("no[]");
            for(var i=0;i<name.length;i++){
                name[i].checked=false;
            }
        }
        //反选
        function selectInvert(){
            var name = document.getElementsByName("no[]");
            for(var i=0;i<name.length;i++){
                if(name[i].checked)
                    name[i].checked=false ;
                else
                    name[i].checked=true ;
            }
        }
    </SCRIPT>

</body>
</html>


